<!DOCTYPE html>
<meta charset="utf-8">
<title>Page Visibility plugin for jQuery</title>
<style>
	pre {
		white-space: pre;
		white-space: pre-wrap;
		word-wrap: break-word;
	}
</style>
<h1>Page Visibility plugin for jQuery</h1>
<p>Detecting Page Visibility API support…
<p><strong>Focus another tab or window</strong>, and watch the log below.
<pre></pre>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="jquery-visibility.js"></script>
<script>
	$(function() {

		var $pre = $('pre');

		$('p').first().html(
			$.support.pageVisibility
				? 'The Page Visibility API is natively supported in this browser. The <code>hide</code> callback will only fire when this page isn’t visible anymore. Note that the page may still be visible if you change the focus to another application.'
				: 'The Page Visibility API is not natively supported in this browser. The plugin will fall back to `focus` and `blur` events. If you change the focus to another application, the <code>hide</code> callback will fire, even if the window is still visible.'
		);

		function log(text) {
			$pre.append(text + '<br>');
		}

		$(document).on({
			'show.visibility': function() {
				log('The page gained visibility; the <code>show</code> event was triggered.');
			},
			'hide.visibility': function() {
				log('The page lost visibility; the <code>hide</code> event was triggered.');
			}
		});

	});
</script>
